<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统票据管理</title>
    <!--  引入共同的样式文件  -->
    <th:block th:include="~{fragment/common-css::imports}"></th:block>
</head>
<body>

<div class="container-fluid main" id="app" style="padding: 0px">
    <div class="row clearfix no-gutters">
        <!-- 菜单栏组件 -->
        <menu-component></menu-component>
        <div class="col col-sm-10 flex-grow-1" style="padding-left: 0;padding-right: 0">
            <!-- 引用 HeaderComponent 组件 -->
            <header-component></header-component>
            <main style="padding-left: 25px;padding-right: 10px;padding-top: 15px;">
                <!-- 使用 breadcrumb-component 并直接传递面包屑项数组 -->
                <breadcrumb-component :items="['首页', '票据管理']"></breadcrumb-component>

                <!--搜索栏-->
                <div id="search" style="padding-top: 8px">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
                        <el-form-item label="票据编号">
                            <el-input v-model="searchForm.ticketNumber" placeholder="票据编号"></el-input>
                        </el-form-item>
                        <el-form-item label="开具方">
                            <el-input v-model="searchForm.issuer" placeholder="开具方"></el-input>
                        </el-form-item>
                        <el-form-item label="接收方">
                            <el-input v-model="searchForm.receiver" placeholder="接收方"></el-input>
                        </el-form-item>
                        <el-form-item label="票据类型">
                            <el-select v-model="searchForm.type" placeholder="票据类型" clearable
                                       style="width: 120px">
                                <el-option label="发票" :value="1"></el-option>
                                <el-option label="收据" :value="2"></el-option>
                                <el-option label="提单" :value="3"></el-option>
                                <!-- 可根据实际票据类型继续添加更多选项 -->
                            </el-select>
                        </el-form-item>
                        <el-form-item label="票据状态">
                            <el-select v-model="searchForm.status" placeholder="票据状态" clearable
                                       style="width: 120px">
                                <el-option label="未处理" :value="0"></el-option>
                                <el-option label="已核销" :value="1"></el-option>
                                <el-option label="已作废" :value="2"></el-option>
                                <!-- 按实际业务定义的票据状态添加更多选项 -->
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="query"><i class="el-icon-search"
                                                                        style="margin-right: 5px"> </i>查询
                            </el-button>
                            <el-button type="info" @click="refresh"><i class="el-icon-refresh"
                                                                       style="margin-right: 5px"> </i>重置
                            </el-button>
                        </el-form-item>
                    </el-form>

                </div>
                <!--end of 搜索栏-->
                <!--                数据操作栏-->
                <div id="tbl-btn" style="margin-bottom: 5px">
<!--                    <el-button size="small" type="primary" @click="openAddDialog">获取票据列表</el-button>-->
                    <el-button size="small" type="success" style="margin-bottom: 5px" @click="openAddDialog"><i class="el-icon-plus" style="margin-right: 5px"></i>添加
                    </el-button>
                </div>
                <!--                数据列表-->
                <div id="table" style="padding-right: 15px">
                    <el-table :data="tableData" border stripe style="width: 100%" size="small"
                              @sort-change="sortColumn">
                        <el-table-column type="index" :index="indexMethod" label="序号" width="45"></el-table-column>
                        <el-table-column prop="ticketNumber" label="票据编号" width="180"></el-table-column>
                        <el-table-column prop="issuer" label="开具方"></el-table-column>
                        <el-table-column prop="receiver" label="接收方"></el-table-column>
                        <el-table-column prop="issueTime" label="开具时间" :sortable="'custom'"
                        ></el-table-column>
                        <el-table-column prop="amount" label="金额"></el-table-column>
                        <el-table-column prop="type" label="票据类型" width="100" align="center" :sortable="'custom'"
                        >
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.type == 1"
                                        active-color="#13ce66"
                                        inactive-color="#ccc">
                                </el-switch>
                            </template>
                        </el-table-column>

                        <el-table-column prop="description" label="描述">
                            <template slot-scope="scope">
                                <div style="width: 200px; word-break: break-all;">{{scope.row.description}}</div>
                            </template>

                        </el-table-column>

                        <el-table-column label="操作" width="210" style="padding-right: 2px">
                            <template slot-scope="scope" style="padding-right: 2px">
                                <el-button type="text" size="small" style="margin-left: 3px"
                                           @click="openEditDialog(scope.row.ticketId)"><i
                                        class="el-icon-edit"></i><span style="margin-left: 1px">修改</span>
                                </el-button>
                                <el-button type="text" size="small" style="margin-left: 3px"
                                           @click=""><i
                                        class="el-icon-view"></i><span style="margin-left: 1px">查看</span>
                                </el-button>
                                <el-button type="text" size="small" style="margin-left: 3px"
                                           @click="handleDelete(scope.row.ticketId)"><i
                                        class="el-icon-delete"></i>
                                    <span style="margin-left: 1px">删除</span></el-button>
                                <el-dropdown style="color: #0c63e4">
                                    <span class="el-dropdown-link  el-button--mini"
                                          style="padding-right: 0px;padding-left: 3px">
                                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>打印票据</el-dropdown-item>
                                        <el-dropdown-item>导出票据</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--  end of 数据列表 -->
                <!--                element ui 分页插件-->
                <div class="block" id="pagination" style="float: right;padding-right: 15px;padding-top: 10px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchForm.current"
                            :page-sizes="[10, 20, 50]"
                            :page-size="searchForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>

                <el-footer style="display: flex; justify-content: center; align-items: center; clear: both;">
                    Footer@[你的相关标识]
                </el-footer>
                <!--弹出对话框-->
                <!--     添加-->
                <el-dialog title="添加票据" :visible.sync="addDialogVisible" width="30%">
                    <el-form :model="addDlgForm" ref="addDlgForm"  size="medium">
                        <el-form-item label="票据编号" prop="ticketNumber" label-width="80px">
                            <el-input v-model.trim="addDlgForm.ticketNumber" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="开具方" prop="issuer" label-width="80px">
                            <el-input v-model="addDlgForm.issuer" autocomplete="off" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="接收方" label-width="80px">
                            <el-input v-model="addDlgForm.receiver" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="开具时间" label-width="80px">
                            <el-input v-model="addDlgForm.issueTime" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="金额" label-width="80px">
                            <el-input v-model="addDlgForm.amount" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" label-width="80px">
                            <el-input v-model="addDlgForm.description" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="票据类型" label-width="80px">
                            <el-select v-model="addDlgForm.type" autocomplete="off"
                                       style="width:300px">
                                <el-option label="发票" :value="1"></el-option>
                                <el-option label="收据" :value="2"></el-option>
                                <el-option label="提单" :value="3"></el-option>
                                <!-- 可根据实际票据类型继续添加更多选项 -->
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="addDialogVisible = false" size="medium">取 消</el-button>
                        <el-button type="primary" @click="handleAdd('addDlgForm')" size="medium">添加</el-button>
                    </div>
                </el-dialog>

                <!--   编辑对话框-->
                <el-dialog title="编辑票据" :visible.sync="editDialogVisible" width="33%">
                    <el-form :model="editDlgForm" ref="editDlgForm"   size="medium" label-width="80px">
                        <input type="hidden" v-model="editDlgForm.ticketId">
                        <el-form-item label="票据编号" prop="ticketNumber">
                            <el-input v-model.trim="editDlgForm.ticketNumber" autocomplete="off"
                                      style="width:300px" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="开具方" prop="issuer">
                            <el-input v-model="editDlgForm.issuer" autocomplete="off" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="接收方" prop="receiver">
                            <el-input v-model="editDlgForm.receiver" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="开具时间" prop="issueTime">
                            <el-input v-model="editDlgForm.issueTime" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="金额" prop="amount">
                            <el-input v-model="editDlgForm.amount" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="description">
                            <el-input v-model="editDlgForm.description" autocomplete="off"
                                      style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="票据类型" prop="type">
                            <el-select v-model="editDlgForm.type" autocomplete="off"
                                       style="width:300px">
                                <el-option label="发票" :value="1"></el-option>
                                <el-option label="收据" :value="2"></el-option>
                                <el-option label="提单" :value="3"></el-option>
                                <!-- 可根据实际票据类型继续添加更多选项 -->
                            </el-select>
                        </el-form-item>
                        <el-form-item label="票据状态">
                            <el-radio-group v-model="editDlgForm.status">
                                <el-radio :label="0">未处理</el-radio>
                                <el-radio :label="1">已核销</el-radio>
                                <el-radio :label="2">已作废</el-radio>
                                <!-- 按实际业务定义的票据状态添加更多选项 -->
                            </el-radio-group>
                        </el-form-item>
                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="editDialogVisible = false" size="medium">取 消</el-button>
                        <el-button type="primary" @click="handleUpdate('editDlgForm')" size="medium">更新</el-button>
                    </div>
                </el-dialog>
            </main>
        </div>
    </div>
</div>




<!-- 引入 Vue 和 Element UI -->
<th:block th:include="~{fragment/common-js::commonjs}"></th:block>

<!-- 引入组件文件 -->
<script src="/site/js/component/sidebarComponent.js"></script>
<script src="/site/js/component/headerComponent.js"></script>
<script src="/site/js/component/breadcrumbComponent.js"></script>
<script th:src="@{/site/js/system/system-ticket.js}"></script>

<script>

</script>

</body>
</html>